<template>
  <div class="contentPage">
<!--    <div class="announcement">http://www.baidu.com</div>-->
    <div class="loginCard">
      <div class="logo">
        <img style="width: 60px" src="../../assets/logo.png" alt="">
      </div>
      <div class="text">
        <div>登录查看</div>
        <div>项目收益表</div>
      </div>
      <div class="inputs">
        <div class="inputItem">
          <input type="text" v-model="params.phone" placeholder="请输入手机号码" />
        </div>
        <div class="inputItem">
          <input v-model="params.password" type="password" placeholder="请输入密码" />
        </div>
      </div>
      <div class="loginBtn" @click="toHome()">立即登录</div>
    </div>
  </div>
</template>
<script setup>
import { login } from '../../api/index.js'
import { onMounted, reactive } from 'vue'
import router from '../../router/index.js'
import {message} from 'ant-design-vue'
const params = reactive({
  phone: '',
  password: ''
})
onMounted(() => {
  let token = localStorage.getItem('h5-token')
    if(token) {
        router.push('/home')
    }
})
const toHome = () => {
    login({ phone: params.phone, password: params.password }).then(res => {
        console.log(res,'res')
        if (res?.code === 200) {
            localStorage.setItem('h5-userInfo', JSON.stringify(res.data.userInfo))
            localStorage.setItem('h5-token', res.data.token)
            router.push('/home')
        }else{
            message.warn(res?.message)
        }
    })
}
</script>
<style scoped lang="less">
/* 小屏幕设备样式 */
@media only screen and (max-width: 767px) {
  @import './index-mobile.less';
}

/* 大屏幕设备样式 */
@media only screen and (min-width: 768px) {
  @import './index-pc.less';
}
</style>
